<?php include_once 'template/header_table.php'; ?>
<!--http://freefeast.info/tutorials-for-beginners/php-tutorials/how-to-use-jquery-datepicker-in-php-jquery-ui-datepicker/-->
<script type="text/javascript">
    // 参考：http://www.cnblogs.com/qjqcs/p/5852958.html
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 获取日期
    $("#datepicker1").datepicker({
    changeMonth: true,
            changeYear: true,
            yearRange: "-1:+0",
            showAnim: 'slideDown', //show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
            maxDate: - 1, //最小日期，可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
            defaultDate: - 7, //默认日期，同上
            duration: 'fast', //动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数
            firstDay: 1,
            currentText: '今天', //设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
            gotoCurrent: false, //如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
            dateFormat: "yy-mm-dd",
            onClose: function (selectedDate) {
            $("#datepicker2").datepicker("option", "minDate", selectedDate);
            }
    });
    $("#datepicker2").datepicker({
    changeMonth: true,
            changeYear: true,
            yearRange: "-1:+0",
            showAnim: 'slideDown', //show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
            maxDate: - 1, //最大日期，同上
            duration: 'fast', //动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数
            firstDay: 1, //设置一周中的第一天。默认星期天0，星期一为1，以此类推。
            currentText: '今天', //设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
            gotoCurrent: false, //如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。  
            dateFormat: "yy-mm-dd",
            onClose: function (selectedDate) {
            $("#datepicker1").datepicker("option", "maxDate", selectedDate);
            }
    });
    //  重置输入表单
    function reset(){
    $("input[name=datepicker1]").val() = null;
    $("input[name=datepicker2]").val() = null;
    }
    var label = document.getElementById("chart_title");
    var chart_title = label.innerHTML;
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
    title: {
    text: chart_title,
            left: 'left' //标题居中 
    },
            tooltip: {},
            toolbox: {
            show: true,
                    feature: {
                    mark: {show: true},
                            dataView: {show: true, readOnly: false}, //  数据视图
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true}, //  刷新
                            saveAsImage: {show: true}, //  下载为图片
                            right: '5%',
                    }
            },
            legend: {
            data: ['图文阅读人数', '分享人数', '收藏人数', '送达人数']
            },
            grid: {
            left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
            },
            xAxis: [
            {
            type: 'category',
                    data: []
            }
            ],
            yAxis: [
            {
            type: 'value',
                    name: '人数',
                    position: 'left',
            },
            {
            type: 'value',
                    name: '送达人数',
                    position: 'right',
            },
            ],
            dataZoom: [
            {
            id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
                    start: 0,
                    end: 100
            },
            ],
            series: [
            {
            "name": "cumulate_user",
                    "type": "bar",
                    "data": []
            }
            ]
    });
    function jsonData() {
    var datein = {
    date_start: $("input[name=datepicker1]").val(),
            date_end: $("input[name=datepicker2]").val(),
    };
    $.ajax({
    type: "post",
            async: false, // false为同步执行，true为异步执行
            url: "data/article_total.php",
            data: datein,
            dataType: "json",
            success: function (result) {
            if (result) {
            var option = {
            xAxis: {
            data: result.title
            },
                    series: [
                    {
                    name: '标题',
                            data: result.title,
                    },
                    {
                    name: '图文阅读人数',
                            data: result.int_page_read_user,
                            type: 'bar',
                            stack: '总量',
                            label: {
                            normal: {
                            show: true,
                            }
                            },
                    },
                    {
                    name: '分享人数',
                            data: result.share_user,
                            type: 'bar',
                            stack: '总量',
                            label: {
                            normal: {
                            show: true,
                            }
                            },
                    },
                    {
                    name: '收藏人数',
                            data: result.add_to_fav_user,
                            type: 'bar',
                            stack: '总量',
                            label: {
                            normal: {
                            show: true,
                            }
                            },
                    },
                    {
                    name: '送达人数',
                            data: result.target_user,
                            type: 'line',
                            yAxisIndex: 1,
                    },
                    ]
            }
            myChart.setOption(option);
            $("#table").html("<thead><tr style='font-weight:bold;'><td>日期</td><td>标题</td><td>送达人数</td><td>图文阅读人数</td><td>阅读/送达(%)</td><td>分享人数</td><td>收藏人数</td><td>分享/送达(%)</td></tr></thead><tbody>");
            for (var i = 0; i < result.title.length; i++) {
            $("#table").append("<tr><td>" + result.date[i] +
                    "</td><td>" + result.title[i] +
//                    "</td><td>" + result.msgid[i] +
                    "</td><td>" + result.target_user[i] +
                    "</td><td>" + result.int_page_read_user[i] +
                    "</td><td>" + result.a[i] + "%" +
                    "</td><td>" + result.share_user[i] +
                    "</td><td>" + result.add_to_fav_user[i] +
                    "</td><td>" + result.b[i] + "%" +
                    "</td><tr>");
            }
//                            添加汇总行
//                    $("#table").append("<tr><td>Total</td><td>" + eval(result.irc.join('+')) +
//                            "</td><td>" + eval(result.iru.join('+')) +
//                            "</td><td>" + eval(result.orc.join('+')) +
//                            "</td><td>" + eval(result.oru.join('+')) +
//                            "</td><td>" + eval(result.sc.join('+')) +
//                            "</td><td>" + eval(result.su.join('+')) +
//                            "</td><td>" + eval(result.afc.join('+')) +
//                            "</td><td>" + eval(result.afu.join('+')) +
//                            "</td><tr>")
            $("#table").append("</tbody>")
            }
            }
    })
    }
    //  初次加载执行默认查询
    jsonData();
</script>    
<?php include_once 'template/footer.php'; ?>